<template>
  <div class="transaction-service-list bg-c-fff right-height mb70">
    <p class="bread">
      <a href="javascript:void(0);" class="font-s-16">业务管理部-合同审查表</a>
    </p>
    <div class="content">
      <div class="seach">
        <input type="text" name="" class="input-css" v-model="keyWord" placeholder="客户名称/监控师">
        <button class="xl-btn-css blue-button vb" @click="getData(1)">搜索</button>
      </div>
      <table width="94%" class="auto">
        <tr>
          <th width="20%">提交时间</th>
          <th width="20%">客户名称</th>
          <th width="10%">客户账号</th>
          <th width="12%">监控师</th>
          <th width="15%">对应订单编号</th>
          <th width="10%">查看详情</th>
        </tr>
        <tr v-for="(item, index) in list">
          <td>{{item.createTime}}</td>
          <td>{{item.businessName}}</td>
          <td>{{item.businessId}}</td>
          <td>{{item.monitorName}}</td>
          <td>{{item.serviceId}}</td>
          <td>
            <button @click="show(index)" class="blue-button small-btn-css">查看详情</button>
          </td>
        </tr>
      </table>
      <div class="noData" v-show="this.list.length===0">没有数据。。。</div>
      <div class="fix foot-box">
        <pagination :index="index" :total="total" v-show="this.list.length!=0" @pagechange="onPageChange"></pagination>
      </div>
    </div>
    <vodal :show="conShow" animation="zoom" :width="1000" :height="640" @hide="conShow=false">
      <div class="vodal-main">
        <h4>合同审查表</h4>
        <div class="con">
          <table width="100%">
            <tr>
              <th colspan="4">合同审查表</th>
            </tr>
            <tr>
              <td width="100px">序号</td>
              <td width="300px">审查项目</td>
              <td width="500px">具体内容</td>
              <td width="200px">备注</td>
            </tr>
            <tr>
              <td>1</td>
              <td>待审查项目与监控申请单一致性</td>
              <td class="choose-box">
                <input type="radio" name="same" id="same" value="1" v-model="uniformity" disabled>
                <label for="same">一致</label>
                <br>
                <input type="radio" name="same" id="notsame" value="0" v-model="uniformity" disabled>
                <label for="notsame">不一致</label>
              </td>
              <td>
                <textarea v-model="uniformityRemarks" placeholder="备注信息" disabled></textarea>
              </td>
            </tr>
            <tr>
              <td>2</td>
              <td>合同合法性</td>
              <td class="choose-box">
                <input type="radio" name="legal" id="legal" value="1" v-model="legitimacy" disabled>
                <label for="legal">合法</label>
                <br>
                <input type="radio" name="legal" id="notlegal" value="0" v-model="legitimacy" disabled>
                <label for="notlegal">不合法</label>
              </td>
              <td>
                <textarea v-model="legitimacyRemarks" placeholder="备注信息" disabled></textarea>
              </td>
            </tr>
            <tr>
              <td>3</td>
              <td>主要法律法规、条款</td>
              <td class="choose-box">
                <textarea class="tex-css" placeholder="类型" v-model="type" disabled></textarea>
              </td>
              <td>
                <textarea v-model="typeRemarks" placeholder="备注信息" disabled></textarea>
              </td>
            </tr>
            <tr>
              <td>4</td>
              <td>主要条款</td>
              <td class="choose-box">
                <ul>
                  <li>
                    <input type="checkbox" name="" id="theSubject" value="标的" v-model="mainTerms" disabled>
                    <label for="theSubject">标的</label>
                  </li>
                  <li>
                    <input type="checkbox" name="" id="price" value="价格" v-model="mainTerms" disabled>
                    <label for="price">价格</label>
                  </li>
                  <li>
                    <input type="checkbox" name="" id="payment" value="支付方式" v-model="mainTerms" disabled>
                    <label for="payment">支付方式</label>
                  </li>
                  <li>
                    <input type="checkbox" name="" id="transport" value="运输" v-model="mainTerms" disabled>
                    <label for="transport">运输</label>
                  </li>
                  <li>
                    <input type="checkbox" name="" id="deliver" value="交付" v-model="mainTerms" disabled>
                    <label for="deliver">交付</label>
                  </li>
                  <li>
                    <input type="checkbox" name="" id="ys" value="验收" v-model="mainTerms" disabled>
                    <label for="ys">验收</label>
                  </li>
                  <li>
                    <input type="checkbox" name="" id="install" value="安装" v-model="mainTerms" disabled>
                    <label for="install">安装</label>
                  </li>
                  <li>
                    <input type="checkbox" name="" id="warranty" value="质保" v-model="mainTerms" disabled>
                    <label for="warranty">质保</label>
                  </li>
                  <li>
                    <input type="checkbox" name="" id="breachOfContract" value="违约" v-model="mainTerms" disabled>
                    <label for="breachOfContract">违约</label>
                  </li>
                  <li>
                    <input type="checkbox" name="" id="jurisdiction" value="管辖权" v-model="mainTerms" disabled>
                    <label for="jurisdiction">管辖权</label>
                  </li>
                  <li>
                    <input type="checkbox" name="" id="notification" value="通知送达" v-model="mainTerms" disabled>
                    <label for="notification">通知送达</label>
                  </li>
                  <li>
                    <input type="checkbox" name="" id="takeEffect" value="生效" v-model="mainTerms" disabled>
                    <label for="takeEffect">生效</label>
                  </li>
                </ul>
              </td>
              <td>
                <textarea v-model="mainRemarks" placeholder="备注信息" disabled></textarea>
              </td>
            </tr>
            <tr>
              <td>5</td>
              <td>具体条款</td>
              <td class="choose-box">
                <input type="checkbox" name="" id="qymqx" value="权益明确性" v-model="specificTerms" disabled>
                <label for="qymqx">权益明确性</label>
                <br>
                <input type="checkbox" name="" id="bsmqx" value="表述确定性" v-model="specificTerms" disabled>
                <label for="bsmqx">表述精确性</label>
              </td>
              <td>
                <textarea v-model="specificRemarks" placeholder="备注信息" disabled></textarea>
              </td>
            </tr>
            <tr>
              <td>6</td>
              <td>资质审查中问题的对策</td>
              <td class="choose-box">
                <input type="radio" name="" id="y" value="1" v-model="countermeasure" disabled>
                <label for="y">有</label>
                <br>
                <input type="radio" name="" id="w" value="0" v-model="countermeasure" disabled>
                <label for="w">无</label>
              </td>
              <td>
                <textarea v-model="countermeasureRemarks" placeholder="备注信息" disabled></textarea>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </vodal>
  </div>
</template>
<script type="text/javascript">
import Pagination from '../components/Pagination'
export default {
  components: {
    Pagination
  },
  data() {
    return {
      keyWord: '',
      index: 1,
      total: 0,
      list: [],
      conShow: false,
      uniformity: '',
      uniformityRemarks: '',
      legitimacyRemarks: '',
      legitimacy: '',
      type: '',
      typeRemarks: '',
      mainTerms: [],
      mainRemarks: '',
      specificRemarks: '',
      specificTerms: [],
      countermeasure: '',
      countermeasureRemarks: ''
    }
  },
  mounted() {
    this.onPageChange(1)
  },
  methods: {
    onPageChange(n) {
      this.getData(n)
    },
    getData(n) {
      console.log(this.keyWord)
      this.$http.post('/contractReview/read/list', {
        page: n,
        rows: 10,
        keyWord: this.keyWord
      }).then(data => {
        if (data.data.httpCode === 200) {
          this.index = n
          this.total = Math.ceil(data.data.total / 10)
          this.list = data.data.rows
        }
      }).catch(err => {
        console.log(err)
        this.$toasted.show('网络错误')
      })
    },
    show(i) {
      this.conShow = true
      this.uniformity = this.list[i].uniformity
      this.uniformityRemarks = this.list[i].uRemark
      this.legitimacy = this.list[i].validity
      this.legitimacyRemarks = this.list[i].vRemark
      this.type = this.list[i].lawsAndRegulations
      this.typeRemarks = this.list[i].lRemark
      this.mainTerms = this.list[i].mainTerms.split(',')
      this.mainRemarks = this.list[i].mRemark
      this.specificTerms = this.list[i].specificTerms.split(',')
      this.specificRemarks = this.list[i].sRemark
      this.countermeasure = this.list[i].hasMethod
      this.countermeasureRemarks = this.list[i].hRemark
    }
  }
}

</script>
<style type="text/css" scoped>
.right-height {
  min-height: 700px;
}

.bread {
  padding-left: 20px;
  border-bottom: 1px solid #ddd;
}

.bread a {
  line-height: 45px;
}

.bread button {
  right: 10px;
  top: 8px;
}

.content .seach input,
.content .seach button {
  height: 35px;
  line-height: 35px;
}

.content .seach {
  padding: 20px 30px;
}

.content .seach button {
  margin-left: -5px;
}

.foot-box {
  padding: 35px 32px 15px 13px;
}

.pagination {
  width: 400px!important;
  margin: 0 auto!important;
}

.vodal-main table,
.vodal-main td,
.vodal-main th {
  border: 1px solid #ddd;
  background-color: #fff;
  color: #333;
  box-sizing:border-box;
  -moz-box-sizing:border-box; /* Firefox */
  -webkit-box-sizing:border-box;
}

.vodal-main td div {
  padding-left: -2px;
}

.vodal-main table {
  border-collapse: collapse;
}

.vodal-main table td.choose-box {
  text-align: left;
  height: 70px;
  padding-left: 35px;
}

.vodal-main table td.choose-box input {
 /* height: 70px;*/
}

.vodal-main table td.choose-box li {
  margin: 2px;
  display: inline-block;
  width: 78px;
  padding: 0;
}

.vodal-main table input[type="text"] {
  width: 330px;
}

.foot-box {
  padding: 35px 0px 0px 0px;
}

textarea {
  padding: 6px;
  height: 46px;
}

.tex-css {
  width: 310px;
  height: 70px;
}


</style>
